
// function move(id, position, page) {
//     var tl = gsap.timeline();

//     // 动画效果
//     tl.to("#bgBubble", { duration: 0.15, bottom: "-30px", ease: "ease-out" }, 0)
//       .to("#bubble1, #bubble2, #bubble3, #bubble4, #bubble5", { duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out" }, 0)
//       .to(".icon", { duration: 0.05, opacity: 0, ease: "ease-out" }, 0)
//       .to("#bgBubble", { duration: 0.2, left: position, ease: "ease-in-out" }, 0.1)
//       .to("#bgBubble", { duration: 0.15, bottom: "-50px", ease: "ease-out" }, '-=0.2')
//       .to(`#bubble${id}`, { duration: 0.15, y: "0%", opacity: 1, boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', ease: "ease-out" }, '-=0.1')
//       .to(`#bubble${id} > span`, { duration: 0.15, y: "0%", opacity: 0.7, ease: "ease-out" }, '-=0.1')
//       .add(() => {
//           setTimeout(() => {
//               // 异步加载新页面内容
//               fetch(page)
//               .then(response => response.text())
//               .then(data => {
//                   // 假设新页面的内容在<body>标签内
//                   const parser = new DOMParser();
//                   const doc = parser.parseFromString(data, 'text/html');
//                   const newContent = doc.body.innerHTML;

//                   // 更新当前页面内容
//                   document.body.innerHTML = newContent + document.body.innerHTML;

//                   // 重新加载导航栏
//                   loadNavbar();
//               })
//               .catch(error => console.error('Error loading page:', error));
//           }, 30);
//       });
// }

// function loadNavbar() {
//     fetch('navbar.html')
//     .then(response => response.text())
//     .then(data => {
//         document.getElementById('navbar').innerHTML = data;
//     })
//     .catch(error => console.error('Error loading navbar:', error));
// }

// // 初始化加载导航栏
// loadNavbar();
function move(id, position, page) {
    var tl = gsap.timeline();

    // 动画效果
    tl.to("#bgBubble", { duration: 0.15, bottom: "-30px", ease: "ease-out" }, 0)
      .to("#bubble1, #bubble2, #bubble3, #bubble4, #bubble5", { duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out" }, 0)
      .to(".icon", { duration: 0.05, opacity: 0, ease: "ease-out" }, 0)
      .to("#bgBubble", { duration: 0.2, left: position, ease: "ease-in-out" }, 0.1)
      .to("#bgBubble", { duration: 0.15, bottom: "-50px", ease: "ease-out" }, '-=0.2')
      .to(`#bubble${id}`, { duration: 0.15, y: "0%", opacity: 1, boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', ease: "ease-out" }, '-=0.1')
      .to(`#bubble${id} > span`, { duration: 0.15, y: "0%", opacity: 0.7, ease: "ease-out" }, '-=0.1')
      .add(() => {
          setTimeout(() => {
              // 异步加载新页面内容
              fetch(page)
              .then(response => response.text())
              .then(data => {
                  // 假设新页面的内容在<body>标签内
                  const parser = new DOMParser();
                  const doc = parser.parseFromString(data, 'text/html');
                  const newContent = doc.getElementById('mainContent').innerHTML;

                  // 只更新主要内容
                  document.getElementById('mainContent').innerHTML = newContent;
              })
              .catch(error => console.error('Error loading page:', error));
          }, 30);
      });
}

function loadNavbar() {
    fetch('navbar.html')
    .then(response => response.text())
    .then(data => {
        document.getElementById('navbar').innerHTML = data;
    })
    .catch(error => console.error('Error loading navbar:', error));
}

// 初始化加载导航栏
loadNavbar();


fetch('navbar.html')
.then(response => response.text())
.then(data => {
    document.getElementById('navbar').innerHTML = data;
})
.catch(error => console.error('Error loading navbar:', error));